<template>
	<view class="card" :style="'margin-top:'+top+'rpx'">
		<view class="card__header" v-if="title">
			<view class="card__header__title">
				<uni-icons type="right" size="16" color="#999" v-if="icon"></uni-icons>{{title}}
			</view>
			<view class="card__header__desc" v-if="desc">
				{{desc}}
			</view>
			<view class="card__header__more" v-if="more" @click="change">
				{{more}}<uni-icons type="right" size="12" color="#999"></uni-icons>
			</view>

		</view>
		<slot></slot>
		<view class="card__more" v-if="bottom" @click="change">
			{{bottomText}} <uni-icons type="right" size="14" color="#999"></uni-icons>
		</view>
	</view>
</template>
<script setup>
	defineProps({
		title: String,
		more: String,
		desc: String,
		bottom: Boolean,
		icon: String,
		bottomText: {
			type: String,
			default: "查看更多"
		},
		top: {
			type: Number,
			default: 20
		}
	})

	const emits = defineEmits(['change'])

	const change = () => {
		emits('change')
	}
</script>
<style lang="scss">
	.card {
		margin: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, .02);
		position: relative;
		z-index: 1;

		&__more {
			text-align: center;
			color: #999;
			padding: 20rpx 0 10rpx;
			font-size: 28rpx;
		}

		&__header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			align-items: center;

			&__desc {
				font-size: 24rpx;
				color: #999;
			}

			&__title {
				font-weight: bold;
				font-size: 36rpx;
				text-shadow: 0rpx 5rpx 15rpx rgba(0, 0, 0, .2);
				color: #222;
			}

			&__more {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>